<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS请求</title>
</head>
<body>
    <ul id="repos">
        111
    </ul>
    <script> 
        //DOMContentLoaded 初始HTML文档被完全加载和解析后触发的事件
        document.addEventListener('DOMContentLoaded',async()=>{
            // console.log(document.getElementById('repos'));
            // then 的链式调用有点繁琐
            // fetch('https://api.github.com/users/shunwuyu/repos')
            // .then(res=>res.json())
            // .then(data=>{
            //     document.getElementById('repos').innerHTML = data.map(item => `<li>${item.name}</li>`)
            //     .join('')
            // })
            // await promise 实例对象
            // fetch的本质是返回promise实例
            // pending 状态 等待
            // resolve() fullfilled 完成了
            // reject() rejected 失败
            const result = await fetch('https://api.github.com/users/shunwuyu/repos')
            const data = await result.json()
            document.getElementById('repos').innerHTML = data.map(item => `<li>${item.name}</li>`).join('')
            // console.log(data);
            
        })
        // api地址 https://api.github.com/users/shunwuyu
        // JSON格式 数据返回 
        // 前端通过 fetch 主动拉取资源 web2.0 动态页面 


    </script>
   
</body>
</html>